<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="utf-8">
    <title>CloudBoost | Invoice</title>
    <style>
     

    .clearfix:after {
      content: "";
      display: table;
      clear: both;
    }

    a {
      color: #0087C3;
      text-decoration: none;
    }

    body {
      position: relative;
      width: 21cm;  
      height: 29.7cm; 
      margin: 0 auto; 
      color: #555555;
      background: #FFFFFF; 
      font-family: Arial, sans-serif; 
      font-size: 14px; 
      font-family: SourceSansPro;
    }

    header {
      padding: 10px 0;
      margin-bottom: 20px;
      border-bottom: 1px solid #AAAAAA;
    }

    #logo {
      float: left;
      margin-top: 8px;
    }

    #logo img {
      height: 70px;
    }

    #company {
      float: right;
      text-align: right;
    }


    #details {
      margin-bottom: 50px;
    }

    #client {
      padding-left: 6px;
      border-left: 6px solid #0087C3;
      float: left;
    }

    #client .to {
      color: #777777;
    }

    h2.name {
      font-size: 1.4em;
      font-weight: normal;
      margin: 0;
    }

    #invoice {
      float: right;
      text-align: right;
    }

    #invoice h1 {
      color: #0087C3;
      font-size: 2.4em;
      line-height: 1em;
      font-weight: normal;
      margin: 0  0 10px 0;
    }

    #invoice .date {
      font-size: 1.1em;
      color: #777777;
    }

    table {
      width: 100%;
      border-collapse: collapse;
      border-spacing: 0;
      margin-bottom: 20px;
    }

    table th,
    table td {
      padding: 20px;
      background: #EEEEEE;
      text-align: center;
      border-bottom: 1px solid #FFFFFF;
    }

    table th {
      white-space: nowrap;        
      font-weight: normal;
    }

    table td {
      text-align: right;
    }

    table td h3{
      color: #1D79F9;
      font-size: 1.2em;
      font-weight: bold;
      margin: 0 0 0.2em 0;
      text-transform: uppercase;
    }

    table .no {
      color: #FFFFFF;
      font-size: 1.6em;
      background: #549AFC;
    }

    table .desc {
      text-align: left;
    }

    table .unit {
      
    }

    table .qty {
    }

    table .total {
      background: #549AFC;
      color: #FFFFFF;
    }

    table td.unit,
    table td.qty,
    table td.total {
      font-size: 1.2em;
    }

    table tbody tr:last-child td {
      border: none;
    }

    table tfoot td {
      padding: 10px 20px;
      background: #FFFFFF;
      border-bottom: none;
      font-size: 1.2em;
      white-space: nowrap; 
      border-top: 1px solid #AAAAAA; 
    }

    table tfoot tr:first-child td {
      border-top: none; 
    }

    table tfoot tr:last-child td {
      color: #57B223;
      font-size: 1.4em;
      border-top: 1px solid #57B223; 

    }

    table tfoot tr td:first-child {
      border: none;
    }

    #thanks{
      font-size: 2em;
      margin-bottom: 50px;
    }

    #notices{
      padding-left: 6px;
      border-left: 6px solid #0087C3;  
    }

    #notices .notice {
      font-size: 1.2em;
    }

    footer {
      color: #777777;
      width: 100%;
      height: 30px;
      position: absolute;
      bottom: 0;
      border-top: 1px solid #AAAAAA;
      padding: 8px 0;
      text-align: center;
    }
    .table-intro-div{
      width:100%;
    }
    .intro-wrapper{
      width:50px;
      margin:0 auto;
    }
    .app-name{
      font-size: 16px;
      font-weight: bold;

    }

  </style>
  </head>
  <body>
    <header class="clearfix">
      <div id="logo">
        <img src="http://i62.tinypic.com/2mrsmpv.png">
      </div>
      <div id="company">
        <h2 class="name">CloudBoost</h2>
        <div>The Valley,Banjara Hills, Hyderabad,India.</div>
        <div>+919700986819</div>
        <div><a href="mailto:company@example.com">hello@cloudboost.io</a></div>
      </div>
      </div>
    </header>
    <main>
      <div id="details" class="clearfix">
        <div id="client">
          <div class="to">INVOICE TO:</div>
          <h2 class="name" mc:edit="name"></h2>          
          <div class="email" mc:edit="link"><a></a></div>
        </div>
        <div id="invoice">
          <div class="date">App Name: <span class="app-name" mc:edit="appname"></span></div>
          <div class="date">Invoice for Date: <span mc:edit="invoicedate"></span></div>
          <div class="date">Current Invoice: <span>$<span mc:edit="currentinvoice"></span></span>USD</div>
        </div>
      </div>
      <div class="table-intro-div">
        <div class="intro-wrapper">
          <h2>INVOICE</h2>
        </div>
      </div>

      <table border="0" cellspacing="0" cellpadding="0">
        <thead>
          <tr>
            <th class="no">#</th>
            <th class="desc">DESCRIPTION</th>
            <th class="unit"></th>
            <th class="qty">USAGE</th>
            <th class="total">CHARGE</th>
          </tr>
        </thead>
        <tbody mc:edit="invoicedetails">       
          
        </tbody>       
      </table>
      <div id="thanks">Thank you!</div>
      
    </main>
    
  </body>
</html>